<!doctype html>



  


<html class="theme-next pisces use-motion" lang="en">
<head>
  <!-- hexo-inject:begin --><!-- hexo-inject:end --><meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>









<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />




  
  
  
  

  
    
    
  

  

  

  

  

  
    
    
    <link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  






<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.1.1" rel="stylesheet" type="text/css" />


  <meta name="keywords" content="William,王立敏,会打代码的扫地王大爷,wlmnzf,中科院信工所,IIE,CAS" />








  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.1.1" />






<meta name="description" content="Secure Chip @ IIE CAS,I am interested in AI,WEB">
<meta property="og:type" content="website">
<meta property="og:title" content="会打代码的扫地王大爷">
<meta property="og:url" content="http://csuncle.com/page/2/index.html">
<meta property="og:site_name" content="会打代码的扫地王大爷">
<meta property="og:description" content="Secure Chip @ IIE CAS,I am interested in AI,WEB">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="会打代码的扫地王大爷">
<meta name="twitter:description" content="Secure Chip @ IIE CAS,I am interested in AI,WEB">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Pisces',
    sidebar: {"position":"left","display":"post","offset":12,"offset_float":0,"b2t":false,"scrollpercent":false},
    fancybox: true,
    motion: true,
    duoshuo: {
      userId: '0',
      author: 'Author'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="http://csuncle.com/page/2/"/>





  <title>会打代码的扫地王大爷</title><!-- hexo-inject:begin --><!-- hexo-inject:end -->
</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="en">

  





  <!-- hexo-inject:begin --><!-- hexo-inject:end --><script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?6a885c4fa76edbbfd2bea3f856135042";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>











  
  
    
  

  <div class="container sidebar-position-left 
   page-home 
 ">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/"  class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">会打代码的扫地王大爷</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <h1 class="site-subtitle" itemprop="description">CS Uncle</h1>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            Home
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br />
            
            Categories
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            Archives
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            Tags
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br />
            
            About
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            
  <section id="posts" class="posts-expand">
    
      

  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <link itemprop="mainEntityOfPage" href="http://csuncle.com/2017/06/11/自定义表单（二）/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="William Wang">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/uploads/avatar.png">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="会打代码的扫地王大爷">
    </span>

    
      <header class="post-header">

        
        
          <h2 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/2017/06/11/自定义表单（二）/" itemprop="url">自定义表单（二）</a></h2>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">Posted on</span>
              
              <time title="Post created" itemprop="dateCreated datePublished" datetime="2017-06-11T05:57:22+08:00">
                2017-06-11
              </time>
            

            

            
          </span>

          
            <span class="post-category" >
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">In</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/WebDesign/" itemprop="url" rel="index">
                    <span itemprop="name">WebDesign</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
            <!--noindex-->
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/2017/06/11/自定义表单（二）/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count hc-comment-count" data-xid="2017/06/11/自定义表单（二）/" itemprop="commentsCount"></span>
                </a>
              </span>
              <!--/noindex-->
            
          

          
          

          

          

          

        </div>
      </header>
    

    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <p>一、瞎扯</p>
<p>  最近在折腾人工智能，今天写了段tensorflow，用来分辨手写字体的图片，跑的时间有点久，所以就跑回来跟前端玩耍了，其实代码早就写好了，只是补上文章。</p>
<p>二、Html5原生拖拽介绍</p>
<p>  Html5的很多特性十分激动人心，比如这里的拖拽功能，还有websockeet，从此网页聊天程序就能更轻松的编写出来，再有就是canvas，于是撼动了flash长久的统治地位，H5还开始进入手机APP领域，开始在制作APP的不归路上越走越远了。</p>
<p>  H5的拖拽十分好用，玩过js拖拽的人知道，在那里，拖拽的效果什么的都需要自己实现，十分地麻烦和复杂，但是在H5中都予以了封装，连移动效果都有，相当不错，简化了开发，不过事实上，对于深入学习并不利，因此想要深入理解原理的小伙伴们建议去实现一下js版本的拖拽。</p>
<p>三、HTML拖拽实现</p>
<p>  跟JS版本的原理一样，H5的拖拽也分为三个步骤，开始拖拽，拖拽时，拖拽后</p>
<p>  前提：拖拽的元素要写上draggable=”true”的标签</p>
<p>1、拖拽元素的 ondragstart，里面写的代码表示开始拖拽的时候发生的事</p>
<p>2、拖放元素所处位置的ondragover，比如拖拽一个img到div上方额，就会触发div的这个事件</p>
<p>3、拖放元素所处位置的ondrop，里面写的代码表示放置后所触发的事件</p>
<p>  很多人肯定会问，那该如何传递数据呢，这里H5也考虑到了，在这里可以通过dataTransfer来传递数据</p>
<p>四、dataTransfer的使用</p>
<p>这里借用W3CSCHOOL中的例子来说明，</p>
<pre><code>functiondragStart(ev)

{

ev.dataTransfer.setData(&quot;Text&quot;,ev.target.id);

}
</code></pre><p>这里其实就是利用setData传递一个文本格式的参数（拖拽元素的id）</p>
<pre><code>functiondrop(ev)

{

ev.preventDefault();

vardata=ev.dataTransfer.getData(&quot;Text&quot;);

ev.target.appendChild(document.getElementById(data));

}
</code></pre><p>  这里则是通过getData来获取这个参数。大吃一惊了吧，方便到爆了。</p>
<p>  因为这个html5拖拽很简单，因此本文其实着重想讲解一下这个dataTransfer。（其实也就是官方api上抄来的而已，哈哈哈哈，不要见怪，我也不敢瞎造啊）</p>
<p>五、dataTransfer API</p>
<p><strong>Properties</strong></p>
<p>DataTransfer.dropEffect</p>
<blockquote>
<p>Gets the type of drag-and-drop operation currently selected or sets the operation to a new type. The value must be none copy link or move.</p>
<p>获取或者设置当前被选择元素的拖拽类型，它的值必须为none、copy、link、或者move</p>
</blockquote>
<p>DataTransfer.effectAllowed</p>
<blockquote>
<p>Provides all of the types of operations that are possible. Must be one ofnone,copy,copyLink,copyMove,link,linkMove,move,alloruninitialized.</p>
<p>提供所有可能的操作种类，必须是none,copy,copyLink,copyMove,link,linkMove,move,all或者uninitialized.中的一个。</p>
</blockquote>
<p>DataTransfer.files</p>
<blockquote>
<p>Contains a list of all the local files available on the data transfer. If the drag operation doesn’t involve dragging files, this property is an empty list.</p>
<p>包含一组可获取的本地文件列表，如果拖拽操作不包含文件，则这个文件列表将会是空的。这个属性超棒，很多拖拽上传功能就是这样子开发出来的</p>
</blockquote>
<p>DataTransfer.items    Read only</p>
<blockquote>
<p>Gives aDataTransferItemListobject which is a list of all of the drag data.</p>
<p>只读，给定一个DataTransferItemList的对象，其中包含了一个所有拖拽数据的列表。</p>
</blockquote>
<p>DataTransfer.types Read only</p>
<blockquote>
<p>An array ofstringgiving the formats that were set in thedragstartevent.</p>
<p>只读，一组字符串数组，给定了在dragstart事件中设置的一组格式。</p>
</blockquote>
<p><strong>Methods</strong></p>
<p>void dataTransfer.clearData([format]);</p>
<p>DataTransfer.clearData()</p>
<blockquote>
<p>Remove the data associated with a given type. The type argument is optional. If the type is empty or not specified, the data associated with all types is removed. If data for the specified type does not exist, or the data transfer contains no data, this method will have no effect.</p>
<p>清除给定类别的数据，type这个参数是可选的，如果类别是空或者不明确，跟所有类别相关的数据都将清除掉，如果特定类别的数据不存在，或者dataTransfer不包含数据，则这个方法将没有任何效果。</p>
</blockquote>
<p>DOM String dataTransfer.getData(format);</p>
<p>DataTransfer.getData()</p>
<blockquote>
<p>Retrieves the data for a given type, or an empty string if data for that type does not exist or the data transfer contains no data.</p>
<p>取回给定类别的数据，如果给定类别的数据不存在或者dataTransfer不包含任何数据，则将返回一个空字符串。</p>
</blockquote>
<p>DataTransfer.setData()</p>
<blockquote>
<p>Set the data for a given type. If data for the type does not exist, it is added at the end, such that the last item in the types list will be the new format. If data for the type already exists, the existing data is replaced in the same position.</p>
<p>设置一个给定类别的数据，如果这个类别的数据不存在，则将被添加到末尾，因此这个类别的列表的最后一项将是一个新的格式，如果这个类别已经存在，则存在的数据将被取代为这个新的数据</p>
</blockquote>
<p>void dataTransfer.setDragImage(img, xOffset, yOffset);</p>
<p>DataTransfer.setDragImage()</p>
<blockquote>
<p>Set the image to be used for dragging if a custom one is desired.      </p>
<p>设置拖拽的时候显示的图片（默认是拖拽元素的缩略图）</p>
</blockquote>
<p>六、代码</p>
<blockquote>
<p><a href="https://github.com/wlmnzf/javascript-train/tree/master/customForm" target="_blank" rel="external">https://github.com/wlmnzf/javascript-train/tree/master/customForm</a></p>
</blockquote>
<p>七、感谢</p>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer" target="_blank" rel="external">1、MDN  DataTransfer   API</a></p>
<p><a href="http://www.w3school.com.cn/html5/html_5_draganddrop.asp" target="_blank" rel="external">2.、W3CSCHOOL  HTML5拖放</a></p>
<p>3、太兴奋的时候要听伤感的歌，感谢 网易云音乐 –《岛歌》</p>

          
        
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <link itemprop="mainEntityOfPage" href="http://csuncle.com/2017/06/11/自定义表单（一）/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="William Wang">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/uploads/avatar.png">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="会打代码的扫地王大爷">
    </span>

    
      <header class="post-header">

        
        
          <h2 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/2017/06/11/自定义表单（一）/" itemprop="url">自定义表单（一）</a></h2>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">Posted on</span>
              
              <time title="Post created" itemprop="dateCreated datePublished" datetime="2017-06-11T05:57:08+08:00">
                2017-06-11
              </time>
            

            

            
          </span>

          
            <span class="post-category" >
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">In</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/WebDesign/" itemprop="url" rel="index">
                    <span itemprop="name">WebDesign</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
            <!--noindex-->
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/2017/06/11/自定义表单（一）/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count hc-comment-count" data-xid="2017/06/11/自定义表单（一）/" itemprop="commentsCount"></span>
                </a>
              </span>
              <!--/noindex-->
            
          

          
          

          

          

          

        </div>
      </header>
    

    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <p>一、瞎扯</p>
<p>之前公司放我一个礼拜写了一个高度定制化，功能完善的自定义表单，然而因为去年9月份，硬盘，u盘，存储卡接连坏掉，代码就没了，不过也多亏这个，避免了日后的官司问题（开个玩笑，此处捂着嘴偷笑），最近一直在恢复之前写过的一些重要的代码，因此顺便更深入地折腾一下这个问题，写一些不会惹官司的demo（这个还真的得严肃对待=_=||）。</p>
<p>二、JS拖拽</p>
<p>2.1原理</p>
<p>拖拽的过程其实只有三个：按下，移动，放开</p>
<p>分别对应JS中的三个事件：</p>
<p>——需拖拽部分的onmousedown</p>
<p>记录下点击时的鼠标位置信息，以及此时点击的节点的位置信息。</p>
<p>绑定document的onmousemove和onmouseup事件。</p>
<p>——Document的onmousemove</p>
<p>记录当前鼠标的位置信息，然后计算出位移值，让刚才选中的节点的坐标的left和top分别加上位移值即可移动到当前位置。</p>
<p>——Document的onmouseup</p>
<p>取消document的onmousemove和onmouseup事件。</p>
<p>然后就完成了一次拖拽。</p>
<p>2.2 JS的setCapture和releaseCapture</p>
<pre><code>//    if (target.setCapture)

//    {

//        target.setCapture();

//    }
//    else if (window.captureEvents)

//    {

//        window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);

//    }
</code></pre><p>我看网上的很多拖拽教程都是用了这两个函数，但是去掉之后依然很正常，就去查询了一下资料，谷歌了一下，在MDN上找到了API：</p>
<pre><code>element.setCapture(retargetToElement);

retargetToElement：

If true, all events are targeted directly to this element;if false, events can also fire at descendants of this element.

参数retargetToElement：如果为true，则所有的事件将直接导向这个元素，如果为false，则同时也将指向派生自这个元素的元素（子元素）

function：Callthismethod during the handling of a mousedown event to retarget all mouse events tothiselement until the mouse button is released or document.releaseCapture() is called.

功能：在mousedown绑定的函数中调用这个函数将重定向所有鼠标事件到这个元素直到鼠标被释放或者调用了document.releaseCapture()

因为在这里我绑定的是document的onmousemove和onmouseup，整个页面中的鼠标事件也能得到响应，拖动速度快了，鼠标超出了拖拽元素依然能得到响应，因此setCapture其实也不需要。
</code></pre><p>2.3 移动算法</p>
<p>原先采用的算法是</p>
<p><img src="http://upload-images.jianshu.io/upload_images/685455-2e17975c96bc7ef2?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="请输入图片描述"></p>
<pre><code>黑色部分是浏览器页面，白色部分是拖拽元素，棕色部分是点击的圆点，黄色部分是是鼠标点击处在浏览器上的坐标位置（X，Y），红色部分则是鼠标点击处在拖拽元素中的偏移量（x,y）,因此实际上要设置的top和left值是(X-x,Y-y),这里稍后还得普及一下各种位置信息的区别以及获取方法，不过这种方法的效果并不是很理想，所以就还整了新的方法，在mousedown时记录鼠标位置信息，然后在mousemove中，记录鼠标位移的变化值，把值直接加在拖拽元素的坐标上面就好了。
</code></pre><p>2.4 区分offsetX layerX PageX clientX 值</p>
<p>offsetX:</p>
<p>IE特有（新版本浏览器 除了ff都支持）,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值。</p>
<p>layerX:</p>
<p>FF特有,鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,以页面为参考点,如果有,将改变参考坐标系,从触发元素盒子模型的border区域的左上角为参考点，</p>
<p>也就是当触发元素设置了相对或者绝对定位后,layerX和offsetX就幸福地生活在一起^-^,几乎相等,唯一不同就是一个从border为参考点,一个以内容为参考点</p>
<p>PageX和clientX ,这个两个比较容易搞混,</p>
<p>PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化</p>
<p>clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器的可视窗口为参考点,随滑动条移动 而变化.</p>
<p>IE中没有PageX，解决办法：</p>
<p>PageY=clientY+scrollTop-clientTop;</p>
<p>页面上的位置=可视区域位置+页面滚动条切去高度-自身border高度</p>
<p>三、源码</p>
<p><a href="https://github.com/wlmnzf/javascript-train/tree/master/customForm" target="_blank" rel="external">https://github.com/wlmnzf/javascript-train/tree/master/customForm</a><br>四、感谢</p>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/setCapture" target="_blank" rel="external">1.MDN-Element.setCapture()</a></p>
<p><a href="http://blog.csdn.net/hdchangchang/article/details/8443237" target="_blank" rel="external">2.各个浏览器中鼠标位置的属性 offsetX layerX PageX clientX （自由拖动框，防止文字选中）</a></p>
<p><a href="http://www.zhangxinxu.com/wordpress/2010/03/javascript%E5%AE%9E%E7%8E%B0%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E6%8B%96%E6%8B%BD%E6%95%88%E6%9E%9C/" target="_blank" rel="external">3.JavaScript实现最简单的拖拽效果</a></p>

          
        
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
  </section>

  
  <nav class="pagination">
    <a class="extend prev" rel="prev" href="/"><i class="fa fa-angle-left"></i></a><a class="page-number" href="/">1</a><span class="page-number current">2</span>
  </nav>



          </div>
          


          

        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">

      

      

      <section class="site-overview sidebar-panel sidebar-panel-active">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
          <img class="site-author-image" itemprop="image"
               src="/uploads/avatar.png"
               alt="William Wang" />
          <p class="site-author-name" itemprop="name">William Wang</p>
           
              <p class="site-description motion-element" itemprop="description"></p>
           
        </div>
        <nav class="site-state motion-element">

          
            <div class="site-state-item site-state-posts">
              <a href="/archives/">
                <span class="site-state-item-count">12</span>
                <span class="site-state-item-name">posts</span>
              </a>
            </div>
          

          
            
            
            <div class="site-state-item site-state-categories">
              <a href="/categories/index.html">
                <span class="site-state-item-count">4</span>
                <span class="site-state-item-name">categories</span>
              </a>
            </div>
          

          
            
            
            <div class="site-state-item site-state-tags">
              <a href="/tags/index.html">
                <span class="site-state-item-count">14</span>
                <span class="site-state-item-name">tags</span>
              </a>
            </div>
          

        </nav>

        

        <div class="links-of-author motion-element">
          
            
              <span class="links-of-author-item">
                <a href="https://github.com/wlmnzf" target="_blank" title="GitHub">
                  
                    <i class="fa fa-fw fa-github"></i>
                  
                  GitHub
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://twitter.com/wlmnzf" target="_blank" title="Twitter">
                  
                    <i class="fa fa-fw fa-twitter"></i>
                  
                  Twitter
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="http://weibo.com/1505236542" target="_blank" title="Weibo">
                  
                    <i class="fa fa-fw fa-weibo"></i>
                  
                  Weibo
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="http://www.linkedin.com/in/wlmnzf" target="_blank" title="Linkedin">
                  
                    <i class="fa fa-fw fa-globe"></i>
                  
                  Linkedin
                </a>
              </span>
            
          
        </div>

        
        

        
        

        


      </section>

      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright" >
  
  &copy; 
  <span itemprop="copyrightYear">2017</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">William Wang</span>
</div>


<div class="powered-by">
  Powered by <a class="theme-link" href="https://hexo.io">Hexo</a>
</div>

<div class="theme-info">
  Theme -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
    NexT.Pisces
  </a>
</div>


        

        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>

  
  <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>

  
  <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>

  
  <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.1"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.1"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.1.1"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.1"></script>



  
    <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.1"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.1"></script>

  

  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.1"></script>



  


  




	

		<script type="text/javascript">
		_hcwp = window._hcwp || [];

		_hcwp.push({widget:"Bloggerstream", widget_id: 94255, selector:".hc-comment-count", label: "{\%COUNT%\}" });

		

		(function() {
		if("HC_LOAD_INIT" in window)return;
		HC_LOAD_INIT = true;
		var lang = (navigator.language || navigator.systemLanguage || navigator.userLanguage || "en").substr(0, 2).toLowerCase();
		var hcc = document.createElement("script"); hcc.type = "text/javascript"; hcc.async = true;
		hcc.src = ("https:" == document.location.protocol ? "https" : "http")+"://w.hypercomments.com/widget/hc/94255/"+lang+"/widget.js";
		var s = document.getElementsByTagName("script")[0];
		s.parentNode.insertBefore(hcc, s.nextSibling);
		})();
		</script>

	












  





  

  

  

  
  
    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
        tex2jax: {
          inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
          processEscapes: true,
          skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
        }
      });
    </script>

    <script type="text/x-mathjax-config">
      MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax(), i;
        for (i=0; i < all.length; i += 1) {
          all[i].SourceElement().parentNode.className += ' has-jax';
        }
      });
    </script>
    <script type="text/javascript" src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script><!-- hexo-inject:begin --><!-- hexo-inject:end -->
  


  

  

</body>
</html>
